import { useRef } from 'react'
import './App.css'
import FormCheck from './FormCheck'

function App() {
  const formRef = useRef(null)
  const formData = {
    realname: '',
    age: 18,
  }

  const validators = {
    realname: (value) => {
      return {
        reg: value.length > 2 && value.length <= 10,
        msg: '大于2小于等于10'
      }
    },
    age: (value) => {
      return {
        reg: Number(value) >= 18,
        msg: '大于等于18'

      }
    }
  }

  const { realname, age } = FormCheck.create(formRef, '.user-form', {
    formData,
    validators,
    pass(key, value) {
      console.log('pass', key, value)
    },
    noPass(key, value, msg) {
      console.log('noPass', key, value, msg)
    },
    handleSubmit(formData) {
      console.log(formData)
    }
  })
  console.log({
    realname,
    age
  })

  return (
    <div className="App">
      <div ref={formRef}>
        <p>
          <input
            type="text"
            name="realname"
            className="user-form"
            defaultValue={realname.state}
          />
        </p>

        <p>
          <input
            type="number"
            name="age"
            className="user-form"
            defaultValue={realname.age}
          />
        </p>
        <p>
          <button className="user-form">Submit</button>
        </p>
      </div>
    </div>
  )
}

export default App
